html {
  scroll-behavior: smooth;
}
.gap-0 {
    gap: 0!important
}

.gap-1 {
    gap: .25rem!important
}

.gap-2 {
    gap: .5rem!important
}

.gap-3 {
    gap: 1rem!important
}

.gap-4 {
    gap: 1.5rem!important
}

.gap-5 {
    gap: 3rem!important
}
/*************************************************/
/* Variables */
/*************************************************/
.rounded10 {
  border-radius: 10px !important;
}

.rounded25 {
  border-radius: 25px !important;
}
.bank {
    background: #080808 ;
    color: #ffffff;
    font-size: 16px;
    padding: 5px 20px;
    border-radius: 11px;
    border-color: #080808;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-info:hover{
    background: white ;
    color: #080808 !important;
    border-color: #080808;
}



.rounded30 {
  border-radius: 30px !important;
}

.rounded50 {
  border-radius: 50px !important;
}

.text-white {
  color: #fff !important;
}

.text-color2 {
  color: #181818 !important;
}

.text-lightcolor2 {
  color: #707070 !important;
}
.main-text-color {
    color: #333E48 !important;
}
.text-color1 {
  color: #FED700 !important;
}

.text-green {
  color: #009422 !important;
}

.text-red {
  color: #FF2E2E !important;
}

.text-color2 {
  color: #181818 !important;
}

.bg-color1 {
  background: #FED700 !important;
}

.bg-gray {
  background: #F3F3F3 !important;
}

.bg-color2 {
  background: #181818 !important;
}

.font-weight-simiBold {
  font-weight: 600 !important;
}

.fz40 {
  font-size: 40px !important;
}

.fz38 {
  font-size: 38px !important;
}

.fz30 {
  font-size: 30px !important;
}

.fz28 {
  font-size: 28px !important;
}

.fz25 {
  font-size: 25px !important;
}

.fz22 {
  font-size: 22px !important;
}

.fz20 {
  font-size: 20px !important;
}

.fz18 {
  font-size: 18px !important;
}

.fz17 {
  font-size: 17px !important;
}

.fz16 {
  font-size: 16px !important;
}

.fz15 {
  font-size: 15px !important;
}

.fz14 {
  font-size: 14px !important;
}

body {
  font-family: "Tajawal", sans-serif, tahoma, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: #F3F3F3;
}

.center {
  text-align: center !important;
  margin: auto !important;
}

.no-padding {
  padding: 0 !important;
}

a {
    color: #333e48;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-decoration: none !important;
  font-family: "Tajawal", sans-serif, tahoma, sans-serif !important;
}
a:hover {
    color: #FED700;
    
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Tajawal", sans-serif, tahoma, sans-serif !important;
}

* {
  outline: 0 !important;
}

/*************************************************/
/* Custom */
/*************************************************/
.modal .modal-content {
  background: none !important;
  border: none;
}

.modal .modal-header {
  border-bottom: 0;
}

.modal .modal-header .close {
  color: white;
  -webkit-box-shadow: none;
          box-shadow: none;
  text-shadow: none;
  background: #FED700;
  opacity: 1;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
}

.modal .modal-body {
  background: none !important;
  border-radius: 30px;
  overflow: hidden;
  -webkit-box-shadow: -1px 10px 13px #150f0f36;
          box-shadow: -1px 10px 13px #150f0f36;
}

.menu-logo {
  background: #FEFEFF;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  /* padding-bottom: 10px; */
}

.logo {
  font-size: 25px;
  font-weight: bold;
  color: #333E48;
}

.logo a {
  color: #333E48;
}

.search-header {
  position: relative;
  width: 100%;
}

.search-header .form-control {
    background: #ffffff;
    border-radius: 30px;
    box-shadow: none;
    border: 2px solid #fed700;
    height: 45px;
    padding: 1em 2em;
}

.search-header .search-btn {
    position: absolute;
    left: 0;
    top: 0;
    border: none;
    background: #fed700;
    color: #181818;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    bottom: 0;
    border-radius: 40px 0 0 40px;
    padding: 10px 20px;
    font-size: 20px;
}

.search-header .search-btn:hover {
  color: #fff;
}
.droopmenu-extra {
    float: none;
}
.droopmenu > li > a, .droopmenu > li > span {
    color: #707070;
}
.droopmenu-button.btn.btn-link i,.user-nav i {
    color: #707070;
    font-size: 20px !important;
}
.droopmenu li:hover > a, .droopmenu li li:hover > a {
    color: #FED700 !important;
}
.language-switcher,
.currency-switcher {
  position: relative;
}

.language-switcher a,
.language-switcher span,
.currency-switcher a,
.currency-switcher span {
  color: #707070 !important;
  font-weight: 500 !important;
  font-size: 17px !important;
}

.language-switcher a i,
.language-switcher a img,
.language-switcher span i,
.language-switcher span img,
.currency-switcher a i,
.currency-switcher a img,
.currency-switcher span i,
.currency-switcher span img {
  margin-left: 8px;
}

.currency-switcher img {
  width: 35px;
}

.currency-switcher ul li img {
  float: right;
}

.no-indicator .droopmenu-indicator {
  display: none !important;
}

/****************************
======== Main Home Slider =========
****************************/
.carousel-indicators li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.carousel-item {
  border-radius: 30px;
  height: 500px;
  overflow: hidden;
}

.carousel-item img {
  height: auto;
  min-height: 100%;
}

.google-maps {
  position: relative;
  padding-bottom: 15%;
  height: 0;
  overflow: hidden;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.lazy {
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.lazy.loaded {
  opacity: 1;
}

.slick-slide {
  outline: 0 !important;
}

.slick-next {
  right: -25px;
}

.slick-prev {
  left: -35px;
}

.slick-prev,
.slick-next {
  width: 30px;
  height: 30px;
  background: #BFB1C8;
  border-radius: 50%;
  color: #FED700;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  outline: 0 !important;
  position: absolute;
  z-index: 9;
  top: 50%;
  -webkit-transform: translateY(-50%)rotate(180deg);
          transform: translateY(-50%)rotate(180deg);
}

.slick-prev:hover, .slick-prev:active,
.slick-next:hover,
.slick-next:active {
  background: #181818;
  color: #FED700;
}

ul.slick-dots {
  display: block;
  list-style-type: none;
  text-align: center;
  margin-top: 1em;
}

ul.slick-dots li {
  display: inline-block;
}

ul.slick-dots li button {
  width: 12px;
  margin: 5px;
  height: 12px;
  border-radius: 50%;
  background: #181818;
  border: none;
  text-indent: -9999px;
  outline: 0;
}

ul.slick-dots li.slick-active button {
  background: #FED700;
}

.common-wrapper {
  padding: 4em 0;
}

.section-title {
  margin-bottom: 2em;
}

.section-title span,
.section-title .main-title {
  font-size: 22px;
  color: #181818;
  font-weight: 700;
  display: inline-block;
  margin: 10px 0;
}

.section-title a {
  color: #FED700;
  font-size: 16px;
  font-weight: 600;
}

.section-title a:hover {
  color: #181818;
}

.section-description {
  color: #181818;
  font-size: 16px;
  font-weight: 500;
  width: 50%;
  margin: 1em auto;
}

.head-title {
  color: #FED700;
  font-size: 30px;
  font-weight: bold;
}

/****************************
======== Brands =========
****************************/
.brands .slick-slide {
  margin: 0 40px;
}

.brands .slick-list {
  margin: 0 -40px;
}

.brands .slick-dots {
  display: none;
}

.single-brand {
  border-radius: 13px;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  margin: 0 10px;
  height: 130px;
}

.single-brand img {
  margin: auto;
  width: auto;
  height: auto;
  padding: 20px;
}

/****************************
======== Features =========
****************************/
.single-feature {
  text-align: center;
  margin-bottom: 30px;
}

.single-feature .icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  margin: 0 auto 20px;
  background: #FED700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.single-feature .icon img {
  margin: auto;
  max-width: 50%;
}

.single-feature .feature-title {
  color: #FED700;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.single-feature .feature-description {
  color: #707070;
  font-size: 15px;
  font-weight: 600;
}

.single-feature:hover .icon {
  -webkit-box-shadow: 0 0 0 10px fade(#FED700, 90%), 0 0 0 20px fade(#FED700, 20%);
          box-shadow: 0 0 0 10px fade(#FED700, 90%), 0 0 0 20px fade(#FED700, 20%);
}

/****************************
======== Off-Canvas menu =========
****************************/
.cats-title {
  pointer-events: none;
}

.offcanvas-active {
  overflow: hidden;
}

.overlay {
  height: 100%;
  width: 0%;
  z-index: 1100;
  margin-right: -100%;
  top: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(66, 17, 96, 0.5);
  position: absolute;
  -webkit-transition: opacity .2s linear, visibility .1s, width 1s ease-in;
  transition: opacity .2s linear, visibility .1s, width 1s ease-in;
}

.overlay.show {
  -webkit-transition: opacity .5s ease, width 0s;
  transition: opacity .5s ease, width 0s;
  opacity: 1;
  width: 100vw;
  visibility: visible;
}

.screen-overlay {
  width: 0%;
  height: 100%;
  z-index: 1100;
  position: fixed;
  top: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #212529c2;
  -webkit-transition: opacity .2s linear, visibility .1s, width 1s ease-in;
  transition: opacity .2s linear, visibility .1s, width 1s ease-in;
}

.screen-overlay.show {
  -webkit-transition: opacity .5s ease, width 0s;
  transition: opacity .5s ease, width 0s;
  opacity: 1;
  width: 100%;
  visibility: visible;
}

.review-sidebar-wrapper {
  position: relative;
}

.single-product-page-wrapper {
  overflow: hidden;
}

.review-section-wrapper {
  overflow: hidden;
  min-height: 500px;
}

#reviewPanel {
  -webkit-box-shadow: 28px 0px 57px -61px black;
          box-shadow: 28px 0px 57px -61px black;
  background: #F3F3F3;
  padding: 2em 1em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: auto;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: -5;
}

#reviewPanel.show {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 99;
}

.write-review .form-control {
  border-radius: 11px;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 1em;
}

.write-review .form-control:focus {
  -webkit-box-shadow: inset 0 0 0 1px #FED700;
          box-shadow: inset 0 0 0 1px #FED700;
}

.offcanvas {
  direction: rtl;
  width: 450px;
  visibility: hidden;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-radius: 0;
  -webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
  box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
  display: block;
  position: fixed;
  top: 10%;
  max-width: 100%;
  /* height: 100%; */
  z-index: 1200;
  background-color: #F3F3F3;
  overflow: hidden;
  /* transform: translateX(50%); */
  bottom: 10%;
  left: 0;
  opacity:0;
}
.offcanvas.show {
  visibility: visible;
           transform: translateX(-50%);
 left:50%;
   transition:   0.5s;
   opacity:1;
 }
.offcanvas#reviewPanel {
  position: absolute;
  right: auto;
  left: 0;
}

.offcanvas .wrapper {
  position: relative;
}

.offcanvas .wrapper header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 888;
  margin: 0;
  border-radius: 0;
  border-bottom-color: #70707086 !important;
}

.offcanvas .wrapper footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 888;
  background: #FFFFFF;
  -webkit-box-shadow: 0px -3px 10px #0000000D;
          box-shadow: 0px -3px 10px #0000000D;
  text-align: center;
  padding: 20px;
}

.offcanvas .wrapper .inner-items {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 5rem 1.5rem;
}



.offcanvas .btn-close {
  position: absolute;
  left: 15px;
  top: 15px;
}

/****************************
======== Aside Cart =========
****************************/
.single-cart-item {
  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
  padding: 15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.single-cart-item .item-thumb {
  width: 86px;
  height: 79px;
  overflow: hidden;
  text-align: center;
}

.single-cart-item .item-thumb img {
  width: 86px;
  height: 79px;
  -o-object-fit: contain;
     object-fit: contain;
}

.single-cart-item .item-info {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.single-cart-item .item-info .item-title {
  font-size: 16px;
  color: #181818;
  font-weight: bold;
}

.single-cart-item .item-info .item-title a {
  color: #181818;
}

.single-cart-item .delete-item {
  border: none;
  background: none;
  color: #181818;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-right: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.single-cart-item .delete-item i.fas.fa-times-circle {
  color: #a7a7a7;
}

.single-cart-item .delete-item:hover i {
  color: #FF2E2E !important;
}

.single-cart-item .price-per-item {
  color: #181818;
  font-size: 13px;
  font-weight: 600;
  margin: 10px 0;
}

.single-cart-item .total-item-price {
  color: #FED700;
  font-size: 16px;
  font-weight: 900;
}

.single-cart-item:hover a {
  color: #181818 !important;
}

.fixed-footer-buttons a + a {
  margin-right: 20px;
}

/****************************
======== Input number =========
****************************/
.item-quantity {
  color: #FED700;
  font-weight: bold;
  font-size: 14px;
}

.item-quantity span {
  color: #181818;
  margin-right: 10px;
}

.increment-item-quantity {
      box-shadow: 0 0 0 1px black;
    border-radius: 30px;
}

.increment-item-quantity input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer;
}

.increment-item-quantity input::-webkit-outer-adjust-hue-button,
.increment-item-quantity input::-webkit-inner-adjust-hue-button {
  -webkit-appearance: none;
}

.increment-item-quantity .input-group {
  clear: both;
  margin: 0;
  position: relative;
      align-items: center;
}

.increment-item-quantity .input-group input[type='button'] {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  background: none;
  border: none;
    font-size: 24px;
    padding: 0 13px;
}

.increment-item-quantity .input-group .button-minus,
.increment-item-quantity .input-group .button-plus {
  font-weight: bold;
  height: 20px;
  -ms-flex-item-align: baseline;
      align-self: baseline;
  padding: 0;
  width: 20px;
  color: #515151;
  /*border: 2px solid #515151;*/
  position: relative;
  /*border-radius: 50%;*/
  font-size: 16px;
  font-weight: bold;
  line-height: 0px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.increment-item-quantity .input-group .quantity-field {
    position: relative;
    /* height: 25px; */
    /* right: 0; */
    text-align: center;
    width: 52px;
    /* display: inline-block; */
    font-size: 20px;
    margin: 0 0;
    color: #181818;
    /* font-weight: bold; */
    resize: vertical;
    border: 0;
    background: #F3F3F3;
}

.increment-item-quantity .button-plus {
  right: 0;
}

.increment-item-quantity input::-webkit-outer-spin-button,
.increment-item-quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.increment-item-quantity input[type=number] {
  -moz-appearance: textfield;
}

.wrapper header {
  background: white;
  margin: -15px -15px 10px;
  border-radius: 25px 25px 0 0;
}

/****************************
======== Payment methods =========
****************************/
.payment-methods ul {
 
          justify-content: end;
 
  display: flex;
 
      flex-wrap: wrap;
}

.payment-methods ul li {
  width: 50px;
  margin: 10px;
}

.radio_selection label {
  margin: 10px 0;
}

.bg-white .form-control {
  background: #F3F3F3;
}

.payment-methods-options .custom-radio {
  padding: 0;
  margin-bottom: 15px;
}

.payment-methods-options .custom-radio label {
  font-weight: bold !important;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #F3F3F3;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px;
  border-radius: 5px;
}

.payment-methods-options .custom-radio label img {
  margin-right: auto;
  height: 20px;
  width: auto;
}

.payment-methods-options input:checked + label {
  background: #FED700;
  color: #fff;
}

.payment-methods-options input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

/****************************
======== Home Sections =========
****************************/
@media(max-width: 600px) {
 .single-section-item {
     margin-bottom: 20px;
     margin-right: 0 !important;
 } 
}
.single-section-item {
  background: #E5E1E7;
  margin-right: 2px;
  border-radius: 15px;
  text-align: center;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;
  min-height: 250px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.single-section-item .item-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  overflow: hidden;
}

.single-section-item .item-icon img {
  width: auto;
  max-width: 100%;
  height: auto;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.single-section-item .item-title {
  font-size: 18px;
  margin-top: 2em;
}

.single-section-item .item-title a {
  color: #181818;
  display: block;
}

.single-section-item .item-title a:hover {
  color: #FED700;
}

.single-section-item:hover {
  background: #FED700;
}

.single-section-item:hover a {
  color: #181818;
}

.single-section-item:hover img {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

/****************************
======== Home Promotions =========
****************************/
.promotion-img-side {
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: 30px;
}

.promotion-img-side img {
  width: 100%;
  height: auto;
  min-height: 100%;
}

.promotion-video {
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: 30px;
  position: relative;
}

.promotion-video img {
  width: 100%;
  height: auto;
  min-height: 100%;
}

/* .promotion-video:after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(25, 112, 242, 0.3);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
} */

.promotion-video i {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  text-align: center;
  z-index: 8;
  color: #fff;
  font-size: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}

.promotion-video:hover i {
  -webkit-transform: translateY(-50%) rotate(-360deg);
          transform: translateY(-50%) rotate(-360deg);
  color: #FED700;
}

.single-promotion-img {
  width: 100%;
  border-radius: 30px;
}

.single-special-section {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  height: 350px;
  margin-bottom: 30px;
}

.single-special-section .section-img {
  height: 100%;
  width: 100%;
}

.single-special-section img {
  width: 100%;
  height: auto;
  min-height: 100%;
}

.single-special-section:after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(66, 17, 96, 0.51);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.single-special-section .section-title {
  position: absolute;
  margin: auto;
  z-index: 99;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}

.single-special-section .section-title a {
  color: #fff;
  font-size: 30px;
}

/****************************
======== Home Products =========
****************************/
.add-to-fav.active i:before {
  font-weight: 900;
}

.slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.slick-slide {
  margin: 0 10px;
  height: auto !important;
}

/* the parent */
.slick-list {
  margin: 0 -10px;
}

@media(min-width: 600px) {
  .single-product {
      min-height: 370px;
  }
}
.single-product {
  /* background: #fff; */
  border-radius: 0;
  overflow: hidden;
  position: relative;
  /* padding-top: 1em; */
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 30px;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  width: 100%;
}

 
 
.floating-labels {
    position: absolute;
    width: 100%;
    padding: 12px;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
}
.colored-label {
  color: white;
  border-radius: 30px;
  padding: 0 12px;
}
 .bg-red {
  background: red;
}
.bg-green {
  background: green;
}
.single-product .add-to-fav {
    /* position: absolute; */
    /* top: 14px; */
    /* left: 14px; */
    width: 30px;
    height: 30px;
    background: #FEFEEF;
    /* color: #FED700; */
    text-align: center;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 6px 2px #00000017;
}

.single-product .add-to-fav a {
  color: #141414;
  font-size: 15px;
}

.single-product .add-to-fav a i {
  margin-top: 8px;
}

.single-product .add-to-fav:hover i:before {
  font-weight: 900;
}

.single-product .product-thumbnail {
  margin: 0 auto;
  width: 100%;
  height: 150px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  text-align: center;
}

.single-product .product-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

.single-product .product-thumbnail img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}

.single-product .item-title {
  padding: 5px 15px;
  font-size: 16px;
}

.single-product .item-title a {
  color: #181818;
  font-weight: bold;
}

.single-product .rating {
  padding: 5px 15px;
}

.single-product .item-title,
.single-product .rating,
.single-product .item-price {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 1;
}

/* .single-product:hover .item-title,
.single-product:hover .rating,
.single-product:hover .item-price {
  opacity: 0;
} */

/* .single-product:hover .product-thumbnail {
  height: 250px;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  margin-bottom: -100px;
  z-index: 9;
} */

.single-product.added-to-cart .add-to-cart-btn {
  background: #FED700;
  color: white;
}
.single-product:hover {
  background: white;
  transform: translateY(10px);
}
/* new style */

@media(max-width: 600px) {
  /* .single-product{
      padding-top: 10px;
  } */
 .single-product .product-thumbnail {
     height: 120px;
 }
 .single-product .rating {
     padding: 0 15px;
 }
 .single-product .item-title {
  padding: 0px 15px;
 }
 .single-product .item-title a {
     font-size: 12px;
     font-weight: 400;
 }
  .single-product .item-price {
     margin-bottom: 0;
 }
 .item-price {
  padding: 3px 15px;
 }
 .item-price .prices del {
     margin-bottom: 0 !important;
 }
  /* .add-to-cart-btn  {
     padding: 5px !important;
     font-size: 14px;
 } */
}

.reguler-price {
  color: red;
  font-size: 16px;
  font-weight: 500;
}

.search-categories {
  position: relative;
  margin: 20px 0;
}

.search-categories .form-control {
  border-color: #919191;
  background: #F3F3F3;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.add-to-cart-btn,.out-of-stock {
  /* width: calc(100% - 20px);   */
  border: none;
  font-size: 21px;
  /* font-weight: 500; */
  color: #181818;
  text-align: center;
  background: white;
  /* -webkit-box-shadow: inset 0 0 0 2px #fed700; */
  /* box-shadow: inset 0 0 0 1px #ebebeb; */
  padding: 8px 10px;
  border-radius: 5px;
  /* margin: auto auto 10px; */
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  /* text-transform: capitalize; */
  color: #181818;
  background: #fed700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.out-of-stock {
  background: #181818;
  color: #fff;
}

.add-to-cart-btn i {
  /* margin-left: 15px; */
}

.add-to-cart-btn:hover {
  background: #181818;
  color: #fed700;
}

.item-price {
  padding: 5px 15px;
  margin-bottom: 15px;
  margin-top: auto;
  align-items: center;
}

.item-price .sale-prices del {
  color: #919191;
  font-size: 14px;
  font-weight: normal;
  /* margin-bottom: 10px; */
  /* margin-left: 10px; */
  display: block;
}

.item-price .sale-prices span {
  color: #FF2E2E;
  font-size: 18px;
  font-weight: 500;
}

.item-price .discount {
  font-size: 14px;
  color: #FF2E2E;
  font-weight: bold;
  background: rgba(255, 46, 46, 0.15);
  border-radius: 30px;
  -ms-flex-item-align: end;
      align-self: flex-end;
  padding: 0px 5px;
}

.add-rating {
  display: inline-block;
  position: relative;
}

.add-rating .rating-input {
  display: none;
}

.add-rating:hover .rating-star:hover,
.add-rating:hover .rating-star:hover ~ .rating-star,
.add-rating .rating-input:checked ~ .rating-star {
  background-position: 100% 0;
}

.add-rating .rating-star,
.add-rating:hover .rating-star {
  cursor: pointer;
  float: left;
  display: block;
  margin-left: 3px;
  width: 37px;
  height: 34px;
  background: url(../images/stars.png) 100% -34px;
}

.rating i {
  color: #F1B122;
  font-size: 13px;
  margin: 0 -2px;
}

.rating i.empty {
  color: #dddddd;
}

.rating.purple i {
  color: #FED700;
}

.rating.purple i.empty {
  color: #d7d7d7;
}

.rating-progress {
  padding: 1em 2em;
}

.overall-rating {
  color: #181818;
}

.overall-rating .total-avg {
  font-size: 40px;
  font-weight: bold;
}

.overall-rating .single-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.overall-rating .single-progress .progress {
  width: 70%;
  margin: auto;
  background: none;
  height: 4px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.overall-rating .single-progress .progress-bar {
  background: #FED700;
  border-radius: 10px !important;
}

.overall-rating .single-progress span {
  font-weight: bold;
  font-size: 20px;
  min-width: 50px;
}

.overall-rating .single-progress .step-number {
  float: left;
}

.overall-rating .single-progress .step-rate {
  float: right;
}

.ovh {
  overflow: hidden;
}

.btn-dark {
  background: black;
  color: white;
  font-size: 20px;
  padding: 2px 20px;
  border-radius: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-dark:hover {
  background: #181818;
  color: #FED700;
  -webkit-box-shadow: inset 0 0 0 2px white;
          box-shadow: inset 0 0 0 2px white;
}

.btn-white {
  background: white;
  color: #181818;
  font-size: 14px;
  padding: 7px 20px;
  border-radius: 20px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-white:hover {
  background: none;
  color: white;
  -webkit-box-shadow: inset 0 0 0 1px white;
          box-shadow: inset 0 0 0 1px white;
}

.btn-white-outlined {
  -webkit-box-shadow: inset 0 0 0 2px white;
          box-shadow: inset 0 0 0 2px white;
  background: none;
  color: #181818;
  font-size: 16px;
  padding: 5px 20px;
  border-radius: 11px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-white-outlined:hover {
  background: white;
  color: #181818;
}

.btn-color2 {
  background: #181818;
  color: #ffffff;
  font-size: 16px;
  padding: 5px 20px;
  border-radius: 11px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-color2:hover {
  background: none;
  color: #181818;
  -webkit-box-shadow: inset 0 0 0 1px #181818;
          box-shadow: inset 0 0 0 1px #181818;
}

.btn-color1 {
  background: #FED700;
  color: #181818;
  font-size: 16px;
  padding: 5px 20px;
  border-radius: 11px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-color1:hover {
  background: #181818;
  color: #fff;
  -webkit-box-shadow: inset 0 0 0 1px #fff;
          box-shadow: inset 0 0 0 1px #fff;
}

.btn-color1-outlined {
  -webkit-box-shadow: inset 0 0 0 1px #FED700;
          box-shadow: inset 0 0 0 1px #FED700;
  background: none;
  color: #FED700 !important;
  font-size: 16px;
  padding: 5px 20px;
  border-radius: 11px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-color1-outlined:hover {
  background: #FED700;
  color: #fff !important;
}

/****************************
======== Products  Filters =========
****************************/
.products-filters {
  background: #fff;
  border-radius: 13px;
  padding: 15px;
  margin-bottom: 30px;
}

.products-filters label {
  color: #919191;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.products-filters .custom-control {
  margin-bottom: 5px;
}

.custom-control-label::before {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: #919191 solid 1px !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #FED700;
  background-color: #FED700;
}

.single-filter {
  margin: 15px 0;
}

/****************************
======== Footer =========
****************************/
footer#Main {
  background: #181818 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1064%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(24%2c 24%2c 24%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c589.778C106.169%2c567.469%2c184.413%2c486.747%2c269.828%2c419.86C347.204%2c359.268%2c426.339%2c302.225%2c475.715%2c217.252C528.659%2c126.14%2c572.108%2c24.144%2c560.641%2c-80.608C549.014%2c-186.823%2c468.239%2c-266.348%2c412.781%2c-357.677C344.939%2c-469.399%2c317.021%2c-621.159%2c198.689%2c-676.673C79.109%2c-732.772%2c-72.974%2c-704.779%2c-187.746%2c-639.405C-294.958%2c-578.338%2c-332.103%2c-447.657%2c-392.383%2c-340.001C-440.614%2c-253.863%2c-475.828%2c-166.904%2c-505.105%2c-72.623C-540.002%2c39.758%2c-607.947%2c150.622%2c-580.249%2c264.991C-551.051%2c385.551%2c-462.324%2c490.376%2c-354.082%2c550.963C-248.332%2c610.155%2c-118.599%2c614.699%2c0%2c589.778' fill='%23141414'%3e%3c/path%3e%3cpath d='M1440 940.033C1508.8319999999999 927.149 1566.3029999999999 884.846 1619.492 839.2950000000001 1666.951 798.6510000000001 1704.899 749.646 1729.42 692.174 1753.483 635.775 1756.003 575.533 1758.174 514.253 1760.796 440.244 1777.254 362.961 1743.416 297.089 1706.0439999999999 224.337 1645.709 144.337 1564.269 136.77999999999997 1481.03 129.05599999999998 1432.385 237.34300000000002 1352.141 260.781 1271.705 284.275 1166.141 212.22899999999998 1106.038 270.62 1047.461 327.529 1109.454 430.01 1095.182 510.423 1080.181 594.945 997.027 668.974 1020.694 751.49 1044.3 833.794 1133.327 880.567 1211.4180000000001 915.681 1282.748 947.755 1363.126 954.423 1440 940.033' fill='%231c1c1c'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1064'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e") 0 0 no-repeat;
font-size: 16px;
position: relative;
margin-top: 4rem;
padding-top: 3em;
background-size:100%;
}
footer#Main hr {
  border-color: #2a2b2c;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
footer#Main .about-us {
  color: white;
  font-size: 17px;
  /* font-weight: 500;*/
}

footer#Main .footer-content {
  color: #fff;
}

footer#Main .footer-content a {
  color: white;
  font-size: 17px;
  /* font-weight: 500; */
  display: block;
  line-height: 2;
}

footer#Main .footer-content a:hover {
  color: #FED700 !important;
}

footer#Main .footer-logo {
  width: 150px;
}
footer#Main .border-right {
 
    border-right: 1px solid #2a2b2c !important;
 
}
footer#Main h5 {
  color: #fff;
  font-size: 20px;
  /* font-weight: bold; */
  margin-bottom: 25px;
  position: relative;
}

footer#Main h5:before {
  content: '';
  width: 20px;
  height: 2px;
  background: #181818;
  position: absolute;
  bottom: -5px;
  right: 0;
}

footer#Main .footer-social i {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  border: 1px solid #181818;
  text-align: center;
  padding-top: 3px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

footer#Main .footer-social i:hover {
  background: #181818;
  color: #FED700;
}

footer#Main .subscribe-form {
  position: relative;
  margin: 1.5em 0;
  /* margin-top: 10px;*/
}

footer#Main .subscribe-form .form-control {
  height: 54px;
  border-radius: -16px;
  border: 2px solid #181818;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #ffffff;
  padding-left: 110px;
  color: #181818;
}

footer#Main .subscribe-form ::-webkit-input-placeholder {
  color: #181818;
}

footer#Main .subscribe-form :-ms-input-placeholder {
  color: #181818;
}

footer#Main .subscribe-form ::-ms-input-placeholder {
  color: #181818;
}

footer#Main .subscribe-form ::placeholder {
  color: #181818;
}

footer#Main .subscribe-form button {
    /* border-radius: 11px; */
    width: auto;
    height: 100%;
    color: #181818;
    background: none;
    border: none;
    position: absolute;
    left: 0;
    top: 0;
    /* font-weight: 700; */
    padding: 10px 15px;
}

footer#Main .copyrights {
  /* padding: 0 0 15px 0; */
  font-size: 14px;
}

footer#Main .copyrights p {
  color: #fff;
  margin: 0;
  /* font-weight: 500; */
  text-align: center;
}

footer#Main .copyrights p a {
  color: #fff;
}

.go-top {
  position: fixed;
  bottom: 2em;
  left: 2em;
  text-decoration: none;
  background: #181818;
  color: white;
  font-size: 12px;
  padding: 1em 1.3em;
  display: none;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 5px;
  z-index: 999999999;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.go-top i {
  color: #fff;
}

.go-top:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.pagination .page-link {
  background: none;
  border: 1px solid #FED700;
  color: #000;
  border-radius: 4px !important;
  margin: 4px;
  font-size: 16px;
  height: 30px;
  width: 30px;
  min-width: unset;
  font-weight: bold;
}
.pagination {
  justify-content: center;
}
.pagination .page-link:hover {
  background: #FED700;
  color: #fff;
}
.pagination .page-item.active .page-link {
  background-color: #FED700;
  border: 1px solid #fff;
}


#return-to-top {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: black;
  background: rgba(0, 0, 0, 0.7);
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  right: 16px;
  top: 13px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top:hover {
  background: rgba(0, 0, 0, 0.9);
}

#return-to-top:hover i {
  color: #fff;
  top: 5px;
}

.breadcrumb {
  background: none;
}

.breadcrumb li {
  color: #181818;
  font-size: 18px;
  font-weight: 500;
}

.breadcrumb li a {
  color: #FED700;
  font-weight: 500;
}

/****************************
======== forms-page-wrapper =========
****************************/
.forms-page-wrapper .form-group,
.offcanvas .form-group {
  margin-bottom: 15px;
}

.forms-page-wrapper .form-group > label,
.offcanvas .form-group > label {
  display: block;
  margin-bottom: 10px;
}

.forms-page-wrapper label,
.offcanvas label {
  color: #707070;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.forms-page-wrapper .form-control,
.offcanvas .form-control {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  min-height: 45px;
  border-radius: 10px;
}

.forms-page-wrapper .form-control:focus,
.offcanvas .form-control:focus {
  -webkit-box-shadow: inset 0 0 0 1px #FED700;
          box-shadow: inset 0 0 0 1px #FED700;
}

/****************************
======== Single product page =========
****************************/
.single-product-page-wrapper .item-title {
  color: #181818;
  font-size: 17px;
  margin: 7px 0;
  font-weight: 500;
}

.single-product-page-wrapper .item-title a {
  color: #181818;
  margin-left: 10px;
}

.single-product-page-wrapper .item-title a:hover {
  color: #FED700;
}

.single-product-page-wrapper .item-description {
color: #181818;
    font-size: 15px;
    /* font-weight: 500; */
    margin: 10px 0;
}

.single-product-page-wrapper .slider-nav .item {
  /*border-radius: 7px;*/
  overflow: hidden;
  border: none;
  background: rgba(226, 226, 226, 0.55);
  /*border-radius: 6px;*/
  /*margin: 10px 3px;*/
  cursor: pointer;

}
.single-product-page-wrapper .slider-nav {
    /*float:right;*/
    /*width:100px;*/
    /*margin-left:6px;*/
    /*z-index:5;*/
}
.single-product-page-wrapper .slick-slide {
   width:100px; 
}
.single-product-page-wrapper .slider-nav .item img {
      /*width:100px;*/
}
.single-product-page-wrapper .slick-list {
  margin: 0;
  /*height: auto !important;*/
}

.single-product-page-wrapper .slider-nav .slick-current {
  position: relative;
}

.single-product-page-wrapper .slider-nav .slick-current:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(25, 112, 242, 0.2);
}

.add-to-fav {
  width: 35px;
  height: 35px;
  background: rgba(65, 17, 95, 0.13);
  color: #FED700;
  text-align: center;
  border-radius: 50%;
}

.add-to-fav a {
  color: #FED700;
  font-size: 18px;
}

.add-to-fav a i {
  margin-top: 8px;
}

.add-to-fav:hover i:before {
  font-weight: 900;
}

.availability {
  font-size: 14px;
}

.sizing-options label,
.empty-radio-btn label {
  display: inline-block;
  border-radius: 3px;
  border: solid 1px #919191;
  background: #F2F2F2;
  font-size: 16px;
  color: #919191;
  padding: 5px 15px;
  cursor: pointer;
}

.sizing-options input[type="radio"],
.empty-radio-btn input[type="radio"] {
  display: none;
}

.sizing-options input[type="radio"]:checked + label,
.empty-radio-btn input[type="radio"]:checked + label {
  border: solid 1px #FED700;
  background: #FED700;
  color: #fff;
}

.white-radios label {
  background: #fff;
  border-radius: 15px;
  font-weight: 600;
}

.coloring-options label {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom:0;
}

.coloring-options span {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: inline-block;
}

.coloring-options input[type="radio"] {
  display: none;
}

.coloring-options input[type="radio"]:checked + label {
  -webkit-box-shadow: 0 3px 6px 0 #6e6e6e;
          box-shadow: 0 3px 6px 0 #6e6e6e;
  position: relative;
}

.coloring-options input[type="radio"]:checked + label:after {
  content: '\f00c';
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  right: 50%;
  top: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}

.badged-title {
  color: #FED700;
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0;
}

.badged-title .badge {
  border-radius: 50%;
  background: #FED700;
  color: #fff;
  padding: 5px;
  width: 30px;
  height: 30px;
  font-size: 18px;
}

.radio-content {
  display: none;
  margin-top: 2em;
  padding: 1em;
  border: 1px solid rgba(54, 54, 54, 0.3);
  border-radius: 10px;
}

.radio-content img {
  max-width: 100%;
}

@-webkit-keyframes checkmark {
  0% {
    stroke-dashoffset: 50px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 50px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 240px;
  }
  100% {
    stroke-dashoffset: 480px;
  }
}

@keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 240px;
  }
  100% {
    stroke-dashoffset: 480px;
  }
}

.icon--order-success svg path {
  -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
  animation: checkmark 0.25s ease-in-out 0.7s backwards;
}

.icon--order-success svg circle {
  -webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
  animation: checkmark-circle 0.6s ease-in-out backwards;
}

.order-placed-successfully path {
  width: 500px;
}

/****************************
======== Loader =========
****************************/
#loader {
  position: fixed;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background: #181818;
  z-index: 9999;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
          animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

@-webkit-keyframes lds-ripple {
  0% {
    top: 36px;
    right: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    right: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    right: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    right: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

/****************************
======== Sections page =========
****************************/
.sections-page-wrapper .promotion-video {
  height: 300px;
}

.single-best-brand {
  height: 150px;
  overflow: hidden;
  border-radius: 30px;
  margin-bottom: 30px;
}

.single-best-brand img {
  width: 100%;
  height: auto;
  min-height: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.single-best-brand:hover img {
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
}

.section-banner {
  border-radius: 30px;
  overflow: hidden;
  background-size: cover;
  padding: 2em 6em;
  min-height: 200px;
  color: #fff;
  margin: 0 15px;
}

.section-banner.gradient-overlay {
  position: relative;
}

.section-banner.gradient-overlay:before {
  content: '';
  background: -webkit-gradient(linear, right top, right bottom, from(rgba(255, 255, 255, 0)), to(rgba(66, 17, 96, 0.7)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(66, 17, 96, 0.7) 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.banner-section-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 15px;
}

.banner-section-description {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.product-navs .nav-tabs {
  width: auto;
  display: inline-block;
  border: none !important;
}

.product-navs .nav-tabs li {
  display: inline-block;
  background: none;
  margin: 0 !important;
  border: none !important;
}

.product-navs .nav-tabs li a {
  padding: 15px 15px;
  margin: 0 25px;
  color: #919191;
  font-weight: bold;
  border: none !important;
}

.product-navs .nav-tabs li a.active {
  background: none !important;
  color: #FED700 !important;
}

.product-navs .nav-tabs li:hover a {
  background: none !important;
  color: #FED700 !important;
  -webkit-box-shadow: inset 0 -3px 0 0 #FED700;
          box-shadow: inset 0 -3px 0 0 #FED700;
}

.tab-content {
  padding: 2em 0;
}

.single-user-review {
  padding: 10px 0;
  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
}

.single-user-review:first-child {
  padding-top: 0;
}

.single-user-review .user-name {
  margin-left: 10px;
}

.single-user-review .rating i {
  font-size: 12px;
}

.single-user-review .user-review {
  font-size: 14px;
  font-weight: 500;
  margin: 10px 0;
  color: #515151;
}

.product-specs-list {
  margin: 2em 0;
}

.product-specs-list li {
    color: #181818;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    margin: 5px 0;
    border-radius: 0;
}

.product-specs-list li:nth-child(odd) {
  background: rgb(0 0 0 / 10%);
}

.product-specs-list li span {
  width: 30%;
  display: inline-block;
}
.menu-wrapper {
    padding: 1em 0;
}
.top-bar {
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
}
.top-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    
}
.top-list li+li::before {
    content: '|';
    color: #ddd;
    display: inline-block;
    margin: 0 1em;
}
.top-list li i {
    margin-left: 4px;
}
.product-gallery-slider {
    /*display:flex;*/
}
.product-gallery-slider .slick-track {
       display: block;
    /*flex-wrap: wrap;*/
}
.product-gallery-slider .slick-slide{
    margin:5px 0;
}
.product-gallery-slider .colored-label {
    position: absolute;
    left: 10px;
    top: 10px;
}
.product-page-add-btn {
    border-radius: 30px !important;
    font-weight: 500;
}
.product-page-fav-btn {
    width: 40px;
    height: 40px;
        background: none;
    box-shadow: inset 0 0 0 1px #181818;
}
.product-page-fav-btn a {
   display: flex;
   justify-content: center;
   height: 100%;
   width: 100%;
   align-items: center;
   color:#181818;
}

.product-page-fav-btn i {
margin:0 !important;
}
.collapse-items {
     margin-top:2em;
 }
 .collapse-items a.btn {
 display: flex;
    background: #e7e7e7;
    border: 0;
    color: black;
    font-weight: 500;
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 0;
    
    
    
}
.collapse-items .btn-primary:hover,.collapse-items .btn-primary:visited ,.collapse-items .btn-primary:active ,.collapse-items .btn-primary:focus{
    background: #fed700 !important;
    color: #181818 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
 
.collapse-items .btn-primary {
    justify-content:space-between;
}

.collapse-items .btn-primary::after {
    content: '\f068';
    font-family: 'FONT AWESOME 5 PRO';
    font-weight: 600;
        width: 54px;
    height: auto;
    background: #181818;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -16px;
}
 .collapse-items .btn-primary.collapsed::after {
    content: '\f067';
    font-family: 'FONT AWESOME 5 PRO';
    font-weight: 600;
}
.user-comments-wrapper {
    margin-top: 4em;
    border-top: 1px solid #e3e3e3;
    padding-top: 3em;
}
/*************************************************/
/* Responsive */
/*************************************************/
@media all and (max-width: 1024px) {
    .logo {
        font-size: 17px;    
    }
  .carousel-item {
    height: 400px;
  }
  .promotion-img-side,
  .promotion-video,
  .single-special-section {
    height: 280px;
  }
}

@media all and (max-width: 768px) {
  footer#Main .border-right {
 
    border-right: none !important;
 
}
  .product-navs .nav-tabs li a {
    margin: 0;
  }
  .rating-progress {
    padding: 1em 0;
  }
  .droopmenu li > ul {
    border-radius: 0 0 10px 10px;
  }
  .menu-logo {
    position: static;
  }
  .droopmenu-nav > .droopmenu-mclose:not(.dmo-active) {
    display: none !important;
  }
  .user-helper {
    position: relative;
    z-index: 99;
  }
  .droopmenu-extra {
    opacity: 1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  footer#Main h5:before {
    display: none;
  }
  body.droopmenu-dmopen .droopmenu-extra {
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    visibility: hidden;
  }
  body {
    margin-top: 0 !important;
  }
  .carousel-item {
    height: 250px;
  }
  .promotion-img-side,
  .promotion-video,
  .single-special-section {
    height: 200px;
  }
  .section-description {
    width: 100%;
  }
  .no-indicator .droopmenu-indicator {
    display: inline-block !important;
  }
  .droopmenu-extra .droopmenu li a .droopmenu-indicator {
    position: absolute;
    text-align: center;
    height: 100%;
    width: 100%;
    line-height: 60px;
    z-index: 10;
    left: 0;
    top: 0;
  }
  .droopmenu-extra .droopmenu li a .droopmenu-indicator em {
    opacity: 0;
  }
}

@media all and (max-width: 600px) {
  .product-gallery-slider {
    margin-bottom: 30px;
  }
  .promotion-img-side,
  .promotion-video,
  .single-special-section {
    height: auto;
    margin-bottom: 20px;
  }
  .carousel-item {
    height: 200px;
  }
  .user-nav {
    width: auto;
    height: auto;
    background: none;
  }
  .user-nav > a {
    color: #fff !important;
  }
  /* .language-switcher > a,
  .currency-switcher > a,
  .language-switcher span,
  .currency-switcher span {
    color: #fff !important;
  } */
  .logo,
  .search-header {
    text-align: start;
    margin-bottom: 10px;
  }
  .search-header {
      
      margin-bottom: 45px;
    }
    .droopmenu-extra {
      margin-top: 50px;
  }
  footer#Main {
    text-align: center;
  }
  .fz48 {
    font-size: 28px !important;
  }
  .w-50 {
    width: 100% !important;
  }
  .wow {
    -webkit-animation: none;
            animation: none;
    visibility: visible !important;
  }
}

.dm-site-header {
  position: static !important;
  height: auto;
}

.dms-toggler {
  display: block;
  width: 100%;
  height: 56px;
  position: static;
}

.dms-open,
.dms-close {
  width: 44px;
  height: 37px;
  position: static !important;
  display: inline-block;
}

.cats-title {
  color: #181818;
  font-weight: bold;
  font-size: 20px;
  pointer-events: auto;
  cursor: pointer;
}

/* .user-nav {
  background: rgba(25, 112, 242, 0.2);
  border-radius: 27px;
} */

.user-avi {
  font-weight: normal !important;
  font-size: 14px !important;
  text-transform: capitalize !important;
}

.user-avi img {
  width: 28px;
  height: 28px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.droopmenu-extra ul {
  padding-right: 0;
}

.droopmenu-extra ul li > a {
  padding: 0 10px;
}

.droopmenu-button {
  height: 50px;
}

.dm-site-overlay::after {
  display: none;
}

.dm-site-overlay::before {
  background-color: #212529c2;
}

.dm-site-sidebar {
  background: white;
}

.slider-for .item {
  background: rgba(226, 226, 226, 0.55);
  border-radius: 15px;
}

.progress-steps {
  background: #fff;
  -webkit-box-shadow: 0px 10px 16px #00000000;
          box-shadow: 0px 10px 16px #00000000;
  border-radius: 10px;
  padding: 20px 10px 10px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(10%, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(10%, 1fr));
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 15px;
}

.progress-steps .progress-step {
  position: relative;
}

.progress-steps .progress-step:before {
  content: '';
  height: 2px;
  width: 100%;
  background: #DBDBDB;
  display: inline-block;
  position: absolute;
  right: 50%;
  top: 10px;
  z-index: 1;
}

.progress-steps .progress-step:last-child:before {
  display: none;
}

.progress-steps .progress-step.done:before {
  background: #FED700;
}

.progress-steps .progress-step.done i {
  color: #FED700;
}

.progress-steps .progress-step.done i:before {
  content: '\f058';
  color: #FED700;
}

.progress-steps .progress-step.done span {
  color: #FED700;
}

.progress-steps .progress-step.in-progress i:before {
  -webkit-box-shadow: 0 0 0 2px white, 0 0 0 4px #FED700;
          box-shadow: 0 0 0 2px white, 0 0 0 4px #FED700;
  border-radius: 50%;
  font-size: 16px;
  color: #FED700;
}

.progress-steps .progress-step i {
  font-size: 20px;
  color: #DBDBDB;
  position: relative;
  z-index: 2;
  background: #fff;
}

.progress-steps .progress-step span {
  display: block;
  font-size: 12px;
  color: #7D7D7D;
  font-weight: 600;
  margin-top: 10px;
  text-transform: capitalize;
}

.special-sections .carousel-item {
      text-align: center;
  }
.comments_card_item {
    width: 40%;
    border: none;
    border-radius: 12px;
    height: 160px;
    padding: 20px;
}
.special-sections .carousel-item .rate-star {
    color: #d3732e;
    font-size: 16px;
    padding-right: 0;
}
.social-section .header-title {
  color: #c2a570;
  font-size: 54px;
  margin-bottom: 10px;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: -1px;
}
.social-section .header-p {
    width: 451px;
    font-size: 18px;
    color: #421160;
}

.social-section .social-icons {
    padding-right: 0;
}
.social-section .social-icons a{
    color:#421160;
    font-size:20px;
    font-weight:600;

}
.social-section .social-icons i{
    color:#ceb273;
    width:40px;
    text-align:center;

}
.social-section .social-icons li {
    padding: 10px 0;
    display:inline-block !important;

}
.contact-header .contact-form {
    margin-top: 20px;
    /*width: 356px;*/
    /*height: 483px;*/
    background-color: #fff;
    border-radius: 16px;
    border: none;
    padding: 30px 20px;
}
.contact-form .form-title {
    color: #ceb273;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}
.contact-form .form-control {
    border: none;
    border-radius: 4px;
    background-color: #f5f5f5;
    min-height: 45px;
    transition:0.3s;
}

.contact-form .form-control:focus {
    border:none;
    box-shadow:inset 0 0 0 2px #ceb273;
}
@media (max-width: 992px) {
  .top-txt.main-text-color {
    font-size: 15px;
  }
  
}
@media (max-width: 768px) {
  .logo {
    margin-bottom: 15px;
  }
  .droopmenu-extra {
    margin-top: 50px;
    left: calc(50% - 60px);
  }
  .menu-wrapper {
    padding-bottom: 50px;
  }
  .dm-site-wrapper {
    right: unset;
    left: 200px;
    top: 75px;
  }
}
@media (max-width: 576px) {
  .dm-site-wrapper {
    left: 5px;
    top: 100px;
  }
}